<template>
  <div>
    <Card class="search-condition">
      <Row>
        <Form ref='pageModel' :model="pageModel" label-position="right" inline :label-width='100'>
          <Row>
            <FormItem prop="matchName" label="赛事名称">
              <Input v-model="pageModel.matchName" placeholder="请输入" clearable style="width:200px"></Input>
            </FormItem>
            <FormItem prop="kindCode" label="赛事类型">
              <dict code="ZGX_SSDJ" model="pageModel.kindCode" :value="pageModel.kindCode" @click="getVal" style="width:200px;margin: 5px 0"></dict>
            </FormItem>
            <FormItem prop="enrollStatus" label="报名状态">
              <Select v-model="pageModel.enrollStatus" placeholder="请选择" clearable style="width:200px;margin: 5px 0">
                <Option v-for="(_item,index) in enrollStatusColums" :key="index" :value="_item.key">{{_item.title}}</Option>
              </Select>
            </FormItem>
            <FormItem prop="niandu" label="年度">
              <DatePicker type="year" v-model="pageModel.niandu" clearable placeholder="请选择" style="width:200px" @on-change="dateChange"></DatePicker>
            </FormItem>
            <FormItem prop="startTime" label="赛事开始时间">
              <DatePicker type="date" placeholder="请选择" style="width:200px; " v-model="pageModel.startTime"></DatePicker>
            </FormItem>
            <FormItem prop="endTime" label="赛事结束时间">
              <DatePicker type="date" :options="opEndTime"  placeholder="请选择" style="width:200px;" v-model="pageModel.endTime"></DatePicker>
            </FormItem>
            <FormItem>
              <Button @click="query" type="primary" class="m-l-sm" icon="md-search">筛选</Button>
              <Button @click="reset" class="m-l-sm" icon="md-sync">重置</Button>
            </FormItem>
          </Row>
        </Form>
      </Row>
    </Card>
    <Card class="m-t-md">
      <Row>
        <Table :loading="loading" :columns="tableColumn" stripe border :data="tableData"></Table>
        <page-temp class="m-t-md" :total="total" :current="pageModel.pageNo" :size="pageModel.pageSize" @changePage="changePage"></page-temp>
      </Row>
    </Card>
  </div>
</template>
<script>
import dict from '_c/dict/dict.vue';
import dictSpan from '_c/dict/dict-span.vue';
import { matchList,endEnrollStatus } from '@/api/applets';
import uploadExcel from "_c/upload/upload-excel.vue";
import {enrollStatusColums} from '@/libs/util.js'
export default {
  components: {
    dict,
    dictSpan,
    uploadExcel
  },
  data() {
    return {
      loading: true,
      total: 0,
      tableColumn: [
        {
          title: "序号",
          width: 80,
          align: "left",
          render: (h, params) => {
            return h(
              "span",
              this.pageModel.pageSize * (this.pageModel.pageNo - 1) + params.index + 1
            );
          }
        },
        {
          title: '赛事名称',
          key: 'matchName'
        },
        {
          title: '赛事类型',
          key: 'kindCode',
          render: (h, params) => {
            return h(dictSpan, {
              props: {
                code: 'ZGX_SSDJ',
                value: params.row.isAttestation==='1'?params.row.kindCode:'-'

              }
            });
          }
        },
        {
          title: '赛事时间',
          key: 'startTime',
          render: (h, params) => {
            return h('span',  params.row.startTime +'-'+ params.row.endTime);
          }
        },
        {
          title: '参赛名额',
          key: 'entryQuota',
          render: (h, params) => {
            let arr = params.row.entryQuota.split(',');
            let num = 0;
            arr.forEach(x => {
              num = num+Number(x);
            });
            return h('span',  num);
          }
        },
        {
          title: '报名人数',
          key: 'countNum'
        },
        {
          title:'报名状态',
          key:'enrollStatus',
          render: (h, params) => {
            return h('span',  params.row.enrollStatus === '1'?'报名中':params.row.enrollStatus === '2'?'即将开赛':'报名结束');
          }
        },
        {
          title: '操作',
          render: (h, params) => {
            let self = this;
            let status = params.row.enrollStatus ==='1'?'关闭':'开启';
            return h('div', [
              h(
                'Button',
                {
                  props: { type: 'primary', size: 'small' },
                  style: {marginRight: "5px"},
                  on: {
                    click() {
                      self.$router.push({
                        name:'management-event-person',
                        params:{
                          type:'event-person',
                          id:params.row.matchId
                        }
                      });
                    }
                  }
                },
                '查看'
              ),
              h(
                'Poptip',
                {
                  props: {
                    confirm: true,
                    title: `确定要${status}报名吗?`,
                    transfer: true
                  },
                  on: {
                    'on-ok': () => {
                      self.close(params.row);
                    }
                  }
                },
                [
                  h(
                    params.row.enrollStatus ==='1' || params.row.enrollStatus ==='2' ?'Button':'',
                    {
                      style: {
                        marginRight: '5px'
                      },
                      props: { type: params.row.enrollStatus ==='1'?'error':'warning', size: 'small' }
                    },
                    params.row.enrollStatus ==='1'?'关闭报名':params.row.enrollStatus ==='2'?'开启报名':''

                  )
                ]
              )
            ]);
          }
        }
      ],
      tableData: [],
      enrollStatusColums:enrollStatusColums,
      pageModel: {
        matchName: null,
        kindCode: null,
        startTime: null,
        endTime: null,
        niandu: null,
        pageNo: 1,
        pageSize: this.$config.PAGE_SIZE
      },
      opEndTime: {
        disabledDate: date => {
          return (
            date &&
            this.pageModel.startTime &&
            this.pageModel.startTime.valueOf() > date.valueOf()
          );
        }
      },
    };
  },
  mounted() {
    this.query();
  },
  methods: {
    reset() {
      this.$refs["pageModel"].resetFields();
      this.query()
    },
    getVal(expression) {
      let self = this;
      eval(expression);
    },
    query() {
      this.loading = true;
      this.pageModel.matchName = _.trim(this.pageModel.matchName);
      matchList(this.pageModel)
        .then(data => {
          this.total = data.count || 0;
          this.tableData = data.list || [];
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
          this.tableData = [];
          this.total = 0;
        });
    },
    changePage(pageNum) {
      this.pageModel.pageNo = pageNum;
      this.query();
    },
    close(item) {
      endEnrollStatus({matchId:item.matchId,status:item.enrollStatus === '1'?'2':'1'})
        .then(res => {
          this.query()
        })
    },
    dateChange(date) {
      this.pageModel.niandu = date
    }
  }
};
</script>

<style scoped>
  .search-condition >>> span{
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
</style>
